<!--
 * @Description:
 * @Author: lz
 * @Date: 2022-12-22 21:57:53
 * @LastEditTime: 2022-12-22 21:57:54
 * @LastEditors: lz
-->

<template>
  <div class="intermediary">
    <div class="search">
      项目代码
      <el-input v-model="projectName" placeholder="项目名称" class="input"></el-input>
      <span class="evalStatus">状态</span>
      <el-select v-model="status" clearable placeholder="请选择">
        <el-option label="待关联" value="0"></el-option>
        <el-option label="待评价" value="1"></el-option>
        <el-option label="已评价" value="2"></el-option>
      </el-select>
      <el-button class="search-button" @click="getIntermediary">搜索</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" :index="indexMethod" label="序号" width="100"></el-table-column>
      <el-table-column prop="projectName" label="项目名称" width="180"></el-table-column>
      <el-table-column prop="projectCode" label="项目代码"></el-table-column>
      <el-table-column prop="eventName" label="审批事项名称"></el-table-column>
      <el-table-column prop="deptName" label="审批部门名称"></el-table-column>
      <el-table-column prop="divisionCode" label="所属区划代码"></el-table-column>
      <el-table-column prop="dealTime" label="当前状态的时间"></el-table-column>
      <el-table-column prop="status" label="评价状态">
        <template slot-scope="scope">
          <span :class="['status', 'status' + scope.row.status]">{{ options.find(el => el.value == scope.row.status) ? options.find(el => el.value == scope.row.status).name : ''}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="operation" label="操作">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status == 0" type="text" @click="onRel(scope.row)">关联中介</el-button>
          <el-button v-if="scope.row.status == 2" type="text" @click="onRead(scope.row)">查看评价</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="current"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
    <ApAdd ref="ApAddRef"  @get-page="getIntermediary"/>
    <ItemRel ref="ItemRelRef" @get-page="getIntermediary"/>
    <APList ref="APListRef" @get-page="getIntermediary"/>
  </div>
</template>
<script>
import { getIntermediaryApi } from '@/api/intermediaryApi.js'
import ItemRel from './rel'
import APList from './detail'
import ApAdd from './add'
export default {
  components: {
    ItemRel,
    APList,
    ApAdd
  },
  data () {
    return {
      options: [
        { value: 0, name: '待关联' },
        { value: 3, name: '进行中' },
        { value: 1, name: '待评价' },
        { value: 2, name: '已评价' }
      ],
      projectName: '',
      status: '',
      tableData: [],
      total: 0,
      current: 1,
      pageSize: 10
    }
  },
  mounted () {
    this.getIntermediary()
  },
  methods: {
    review (row, isEval) {
      this.$router.push({
        path: '/evaluation/review',
        query: {
          id: row.id,
          intermediaryId: row.intermediaryId,
          isEval
        }
      })
    },
    indexMethod (index) {
      return index < 10 ? '0' + (index + 1) : index + 1
    },
    getIntermediary () {
      getIntermediaryApi({
        pageNo: this.current,
        pageSize: this.pageSize,
        agencyPeople: JSON.parse(localStorage.getItem('P-User-Info')).id,
        projectName: this.projectName,
        status: this.status
      }).then(res => {
        if (res.code == 0) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.getIntermediary()
    },
    handleCurrentChange (val) {
      this.current = val
      this.getIntermediary()
    },
    onRel(item) {
      this.$refs.ItemRelRef.open(item)
    },
    onAP(item) {
      this.$refs.ApAddRef.open(item)
    },
    onRead(item) {
      this.$refs.APListRef.open(item)
    }
  }
}
</script>
<style lang="scss" scoped>
.intermediary {
  
  .status {
    padding: 4px 12px;
    display: inline-block;
    line-height: 26px;
    border-radius: 18px;
    border: 1px solid;
    font-size: 12px;
    text-align: center;
  }
  .status0 {
    color: #4880FF;
    background: #F1F5FF;
    border-color: #4880FF;
  }
  .status3 {
    color: #4880FF;
    background: #F1F5FF;
    border-color: #4880FF;
  }
  .status1 {
    color: #FF8000;
    background: #FFECEC;
    border-color: #FF8000;
  }
  .status2 {
    color: #21B95E;
    background: #DEFFEB;
    border-color: #21B95E;
  }
  .search {
    margin-bottom: 30px;
    .input {
      width: 215px;
      height: 48px;
      box-shadow: 0px 6px 58px 0px rgba(196, 203, 214, 0.1);
      border-radius: 14px;
      margin-left: 16px;
    }
    .evalStatus {
      margin: 0 18px 0 32px;
    }
    .search-button {
      width: 90px;
      height: 41px;
      background: #4880ff;
      border-radius: 5px;
      margin-left: 24px;
      color: #fff;
    }
  }
  .handle {
    font-size: 18px;
    color: #3f8cff;
    cursor: pointer;
  }
  .pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
  }
  .hadEval {
    width: 87px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    background: #dcfff2;
    border: 1px solid #1cbf84;
    border-radius: 22px;
    font-size: 18px;
    font-weight: 500;
    color: #1cbf83;
  }
  .notEval {
    width: 87px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    background: #fff0d9;
    border: 1px solid #fa9d0b;
    border-radius: 22px;
    font-size: 18px;
    font-weight: 500;
    color: #fa9d0b;
  }
}
</style>
